<template>
  <div class="header_box">
    <span class="iconfont title" :class="collapse ? 'icon-shousuo' : 'icon-zhankai'" @click="changeCollapse"></span>
    <div>
      <span style="color: #fff;">欢迎：</span>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ adminName }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <!-- 下拉框 -->
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="resetPwd">密码修改</el-dropdown-item>
            <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!-- 密码修改 -->
      <el-dialog v-model="resetPwdVisible" title="密码修改">
        <el-form :model="resetPwdData">
          <el-form-item label="旧密码">
            <el-input v-model="resetPwdData.oldPassword" autocomplete="off" type="password" />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="resetPwdData.password" autocomplete="off" type="password" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="resetPwdVisible = false">取消</el-button>
            <el-button type="primary" @click="resetPwdFn">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>


  </div>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { resetPwdAPI } from "@/api/admin"
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'

const store = useStore()

// store.commit('CHANGE_COLLAPSE')
const router = useRouter();
let resetPwdVisible = ref<boolean>(false);
let adminName = reactive(localStorage.getItem('adminName'));
let resetPwdData = reactive({
  id: localStorage.getItem('accountid'),
  account: localStorage.getItem('account'),
  password: '',
  oldPassword: '',
})
let collapse = ref<boolean>(false);


// 重置密码   退出登录
function handleCommand(command: any) {
  // console.log(command);
  if (command == 'loginOut') {
    localStorage.removeItem('adminName');
    localStorage.removeItem('token');
    localStorage.removeItem('account');
    localStorage.removeItem('role');
    localStorage.removeItem('accountid');
    router.push('/login');
  }
  if (command == 'resetPwd') {
    resetPwdVisible.value = true;
  }

}

// 重置密码数据提交
function resetPwdFn() {
  resetPwdVisible.value = false;
  resetPwdAPI({
    ...resetPwdData
  }).then((res: any) => {
    console.log(res);
    ElMessage({
      message: res.msg,
    })
    if (res.code == 2000) {
      router.push('/login');
    }
  })
}

//改变collapse
function changeCollapse() {
  store.commit('CHANGE_COLLAPSE');
  collapse.value = store.state.collapse
  // console.log('header',store.state.collapse);

}
</script>

<style lang="less" scoped>
.header_box {
  width: 100%;
  height: 100%;
  display: flex;
  // justify-content: right;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;

  .title {
    color: white;
    font-size: 24px;
  }

  .el-dropdown-link {
    color: #fff;
    font-size: 15px;
  }
}
</style>